<template>
    <view class="container">
        <view class="header">
            <view class="list">
                <view class="left">
                    <view class="title">欢迎使用</view>
                    <view class="small-title">防伪查询小程序</view>
                </view>
                
                <view class="right" @click="ToBusiness">
                    <image src="/src/static/images/user-circle.png" />
                    {{Object.getOwnPropertyNames(business).length > 0 ? '我的' : '登录'}}
                </view>
            </view>
            
            <view class="validate-input">
                <uv-input :placeholder="placeholderText" v-model="code">
                    #<!-- #ifndef H5 -->
                    <template v-slot:suffix>
                        <uv-icon size="28" name="scan" @click="OnScanCode"></uv-icon>
                    </template>
                    <!-- #endif -->
                </uv-input>
            </view>
        </view>
        
        <view class="validate">
            <uv-button :customStyle="validateBtn" :plain="true" text="开始验证" @click="OnValidate"></uv-button>
        </view>
        
        <uv-toast ref="notice"></uv-toast>
    </view>
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    
    let business = proxy.$business
    let notice = ref()
    // 除了H5以外的其他平台
    // #ifndef H5
    var placeholderText = ref('请输入防伪码或扫防伪码')
    // #endif
    
    // 仅在H5平台
    // #ifdef H5
    var placeholderText = ref('请输入防伪码')
    // #endif
    
    let code = ref('')
    
    // 按钮样式
    let validateBtn = ({
        width: '100%',
        height: '100%',
        background: 'transparent',
        color: '#fff',
        paddingTop: '40px',
        border: '0px'
    })
    
    // 跳转到会员中心页
    const ToBusiness = () => uni.$uv.route('/pages/business/index')
    
    const OnValidate = () => {
        if(!code.value)
        {
            notice.value.show({
                type: 'error',
                message: '请输入防伪码'
            })
            return false
        }
        
        uni.$uv.route({
            url: '/pages/validate/info',
            params: {code: code.value}
        })
        
        code.value = ''
    }
    const OnScanCode = () => console.log('扫防伪码')
</script>

<style lang="scss" scoped>
    .container {
        .header {
            height: 90vw;
            background: linear-gradient(to right, #33ccff 0%, #91cbf8 100%);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding-top: 10vh;
            .list {
                color: #fff;
                display: flex;
                justify-content: space-between;
                .left{
                    margin-left: 20px;
                    .title {
                        margin-bottom: 10px;
                    }
                }
                
                .right {
                    display: flex;
                    align-items: center;
                    background-color: #fff;
                    padding: 0 5px 0 10px;
                    color: #469eff;
                    font-size: 12px;
                    border-top-left-radius: 20px;
                    border-bottom-left-radius: 20px;
                    height: 35px;
                    image {
                        width: 20px;
                        height: 20px;
                        margin-right: 10px;
                    }
                }
            }
            
            .validate-input {
                width: 80%;
                background: #fff;
                border-radius: 10px;
                margin: 0 auto;
                margin-top: 20vw;
            }
        }
        
        .validate {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            background: #2879fc;
            margin: -50px auto 0;
            box-shadow: 0px 0px 10px 10px #eee;
        }
    }
</style>
